﻿Ext.define('ux.ImageCarousel', {
	extend : 'Ext.Carousel',
	xtype : 'imageCarousel',
	id : 'imageCarousel',
	requires : ['ux.ImageViewer'],
	config : {
		style : 'z-index:1000;background-color:#000000;',
		fullscreen : true,
		layout : 'fit',
		listeners : {
			activeitemchange : function(container, value, oldValue, eOpts) {
				var pageLabel = (this.getActiveIndex()+1)+'/'+(this.getMaxItemIndex()+1);
				oldValue.resetZoom();
				this.getActiveItem().rotate();
			},
			resize : function(component, eOpts) {
				this.getActiveItem().rotate();
			}
		}
	},
	onDragStart : function(e) {
		var scroller = this.getActiveItem().getScrollable().getScroller();
		if (e.targetTouches.length == 1
				&& (e.deltaX < 0 && scroller.getMaxPosition().x === scroller.position.x)
				|| (e.deltaX > 0 && scroller.position.x == 0)) {
			this.callParent(arguments);
		}
	},
	onDrag : function(e) {
		if (e.targetTouches.length == 1)
			this.callParent(arguments);
	},
	onDragEnd : function(e) {
		if (e.targetTouches.length < 2)
			this.callParent(arguments);
	}
});